<template>
	<view :style="'width:'+width+';rpx;height:'+height+'rpx'">
		<image :class="clazz" @click="click_image()" 
				border-radius="70rpx" :src="src"
				:style="'width:'+(width-20)+'rpx;height:'+(height-20)+'rpx'"></image>
	</view>
</template>


<script>
	export default {
		name: "bygo-button",
		props: ['src','width','height'],
		data() {
			return {
				clazz: null,
			}
		},
		onLoad() {

		},
		methods: {
			click_image() {
				this.clazz = 'click_image';
				setTimeout(() => {
					this.clazz = 'null'
				}, 1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		position: relative;
		width: 200rpx;
		height: 200rpx;

		image {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 90rpx;
			box-shadow: 0 0 30rpx rgba(67, 149, 255, .5);
			opacity: 1;
			width: 180rpx;
			height: 180rpx;
			background: linear-gradient(145deg, #00b6ff, #0099e6);
			box-shadow:  5px 5px 24px #007cba, 
             -5px -5px 24px #00d8ff;
		}
		
		image:active{
	
		}

		.click_image {
			animation: image1 1.5s infinite;
		}

		@keyframes image1 {
			0% {
				border-radius: 90rpx;
			}

			25% {
				width: 160rpx;
				height: 160rpx;
				background: linear-gradient(145deg, #00b6ff, #0099e6);
				box-shadow:  2px 2px 24px #007cba, 
				-2px -px 24px #00d8ff;
			}
			50% {
				background: linear-gradient(145deg, #00b6ff, #0099e6);
				box-shadow:  2px 2px 24px #007cba, 
				-2px -px 24px #00d8ff;
				border-radius: 60rpx;
			}

			100% {
				
				background: linear-gradient(145deg, #00b6ff, #0099e6);
				box-shadow:  2px 2px 24px #007cba, 
				-2px -px 24px #00d8ff;
				border-radius: 90rpx;
				opacity: .9;
			}
		}
	}
</style>
